<template>
	<div class="peer_compare">
		<x-header title="商圈同行对比" :left-options="{backText: '✖'}">
		</x-header>
		<div class="content">
			<div class="time_nav">
				<tab>
					<tab-item :selected="selectIndex===0" @on-item-click="onItemClick">昨日</tab-item>
					<tab-item :selected="selectIndex===1" @on-item-click="onItemClick">近7天</tab-item>
					<tab-item :selected="selectIndex===2" @on-item-click="onItemClick">近30天</tab-item>
				</tab>
			</div>
			<div class="compare_data">
				<div class="compare_data_title common_title">
					<img src="../../assets/images/statistics/blue.jpg" alt="" />
					<span>商圈同行对比</span>
				</div>
				<div class="compare_data_detail">
					<div class="compare_data_top">
						<div class="customer_volume">
							<h5>入店客户量</h5>
							<p>
								<span>我的门店</span>
								<span>9人</span>
							</p>
							<p>
								<span>同行均值</span>
								<span>0人</span>
							</p>
						</div>
						<div class="order_ratio customer_volume">
							<h5>下单转化率</h5>
							<p>
								<span>我的门店</span>
								<span>0.00%</span>
							</p>
							<p>
								<span>同行均值</span>
								<span>0.00%</span>
							</p>
						</div>
					</div>
					<div class="compare_data_bottom compare_data_top">
						<div class="customer_volume">
							<h5>新客量</h5>
							<p>
								<span>我的门店</span>
								<span>0人</span>
							</p>
							<p>
								<span>同行均值</span>
								<span>0人</span>
							</p>
						</div>
						<div class="order_ratio customer_volume">
							<h5>重复下单顾客</h5>
							<p>
								<span>我的门店</span>
								<span>0人</span>
							</p>
							<p>
								<span>同行均值</span>
								<span>0人</span>
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="trend_compare">
				<div class="common_title">
					<img src="../../assets/images/statistics/blue.jpg" alt="" />
					<span>趋势对比</span>
				</div>
				<div class="compare_nav">
					<tab>
						<tab-item :selected="selectIndex2===0" @on-item-click="onItemClick2">营业额</tab-item>
						<tab-item :selected="selectIndex2===1" @on-item-click="onItemClick2">有效订单</tab-item>
						<tab-item :selected="selectIndex2===2" @on-item-click="onItemClick2">单均价</tab-item>
						<tab-item :selected="selectIndex2===3" @on-item-click="onItemClick2">订单收入</tab-item>
						<tab-item :selected="selectIndex2===4" @on-item-click="onItemClick2">活动补贴</tab-item>
					</tab>
					<p v-if="selectIndex2===0">营业额落后&nbsp;打败0.00%同行</p>
					<p v-if="selectIndex2===1">有效订单落后&nbsp;打败0.00%同行</p>
					<p v-if="selectIndex2===2">单均价落后&nbsp;打败0.00%同行</p>
					<p v-if="selectIndex2===3">订单收入落后&nbsp;打败0.00%同行</p>
					<p v-if="selectIndex2===4">活动补贴落后&nbsp;打败0.00%同行</p>
				</div>
				<div class="compare_chart" v-if="shows">
					<x-chart :id="id" :option="option"></x-chart>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem } from 'vux';
	import XChart from '@/page/statistics/compareChart';
	import options from '@/assets/js/compare_option';
	export default {
		name: 'peer_compare',
		data() {
			let option = options.bar;
			return {
				id: 'test',
				option: option,
				selectIndex: 1, //0-昨日  1-近7天  2-近30天
				selectIndex2: 0, //0-营业额  1-有效订单  2-单均价  3-订单收入  4-活动补贴
				shows: true,
			}
		},
		components: {
			XChart,
			XHeader,
			Tab,
			TabItem
		},
		computed: {

		},
		created() {
			this.selectIndex = +this.$route.params.id;			
		},
		methods: {
			//时间切换
			onItemClick(index) {
				this.selectIndex = index;
			},
			//营业额切换
			onItemClick2(index) {
				this.shows = false;
				setTimeout(() => {
					this.shows = true
				}, 0);
				this.selectIndex2 = index;
				switch(index) {
					case 0:
						options.bar.yAxis.title.text = '营业额';
						break;
					case 1:
						options.bar.yAxis.title.text = '有效订单';
						break;
					case 2:
						options.bar.yAxis.title.text = '单均价';
						break;
					case 3:
						options.bar.yAxis.title.text = '订单收入';
						break;
					case 4:
						options.bar.yAxis.title.text = '活动补贴';
						break;
				}
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.peer_compare {
		.content {
			.time_nav {
				margin-bottom: .18rem;
			}
			.common_title {
				display: flex;
				align-items: center;
				padding: .24rem;
				margin: .16rem 0;
				border-bottom: 1px solid #f0f0f0;
				img {
					width: .09rem;
					height: .39rem;
				}
				span {
					font-size: .34rem;
					color: #191919;
					font-weight: 700;
					margin-left: .28rem;
				}
			}
			.compare_data {
				background: #fff;
				.compare_data_detail {
					text-align: left;
					.compare_data_top {
						display: flex;
						justify-content: space-around;
						padding: .4rem 0;
						.customer_volume {
							width: 44.5%;
							height: 1.66rem;
							background: #fafafa;
							padding: .22rem .1rem 0 .1rem;
							h5 {
								font-size: .26rem;
								color: #000;
							}
							p {
								display: flex;
								justify-content: space-between;
								font-size: .24rem;
								color: #a3a3a3;
							}
							p:nth-of-type(1) {
								margin: .2rem 0 0 0;
							}
						}
					}
					.compare_data_bottom {
						padding-top: 0;
					}
				}
			}
			.trend_compare {
				background: #fff;
				.compare_nav {
					padding: .12rem .25rem .1rem .13rem;
					>p {
						font-size: .28rem;
						color: #080808;
						text-align: left;
						padding-left: .25rem;
					}
				}
				.compare_chart {
					margin-top: 1rem;
				}
			}
		}
	}
</style>